<!-- 车辆编辑弹窗 -->
<template>
  <ele-modal
    form
    :width="740"
    :model-value="modelValue"
    :title="isUpdate ? '修改车辆' : '新建车辆'"
    @update:modelValue="updateModelValue"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      :inline="false"
    >
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="form.status"
          placeholder="请选择"
          style="width: 100px"
        >
          <el-option
            v-for="item in statusList"
            :key="item.id"
            :label="item.title"
            :value="item.title"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属区域" prop="area_id">
        <el-select
          clearable
          v-model="form.area_id"
          placeholder="请选区域"
          style="width: 150px"
          @change="getCompanyList"
        >
          <el-option
            v-for="item in areaList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
            {{ item.title }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属车队" prop="company_id">
        <el-select
          clearable
          v-model="form.company_id"
          placeholder="请选所属车队"
          style="width: 250px"
          filterable
        >
          <el-option
            v-for="item in companyList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
            {{ item.title }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车牌号码" prop="plate_number">
        <el-input style="width: 150px" v-model="form.plate_number" />
      </el-form-item>
      <el-form-item label="车主姓名" prop="realname">
        <el-input style="width: 150px" v-model="form.realname" />
      </el-form-item>
      <el-form-item label="身份证号" prop="idcard">
        <el-input style="width: 150px" v-model="form.idcard" />
      </el-form-item>
      <el-form-item label="电话" prop="tel">
        <el-input style="width: 150px" v-model="form.tel" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input style="width: 150px" v-model="form.address" />
      </el-form-item>
      <el-form-item label="车辆品牌" prop="brand">
        <el-input style="width: 150px" v-model="form.brand" />
      </el-form-item>
      <el-form-item label="车辆类型" prop="vehicle_type">
        <el-input style="width: 150px" v-model="form.vehicle_type" />
      </el-form-item>
      <el-form-item label="车辆型号" prop="vehicle_model">
        <el-input style="width: 150px" v-model="form.vehicle_model" />
      </el-form-item>
      <el-form-item label="驱动形式" prop="drive_type">
        <el-input style="width: 150px" v-model="form.drive_type" />
      </el-form-item>
      <el-form-item label="车身颜色" prop="color">
        <el-input style="width: 150px" v-model="form.color" />
      </el-form-item>
      <el-form-item label="车架号" prop="vin_number">
        <el-input style="width: 150px" v-model="form.vin_number" />
      </el-form-item>
      <el-form-item label="发动机号" prop="engine_number">
        <el-input style="width: 150px" v-model="form.engine_number" />
      </el-form-item>
      <el-form-item label="营运证号" prop="business_cert">
        <el-input style="width: 150px" v-model="form.business_cert" />
      </el-form-item>
      <el-form-item label="登记日期" prop="reg_date">
        <el-date-picker
          v-model="form.reg_date"
          type="date"
          style="width: 130px"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="检验有效期" prop="check_date">
        <el-date-picker
          v-model="form.check_date"
          type="date"
          style="width: 130px"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="营运有效期" prop="business_date">
        <el-date-picker
          v-model="form.business_date"
          type="date"
          style="width: 130px"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="交强有效期" prop="insurance_date_c">
        <el-date-picker
          v-model="form.insurance_date_c"
          type="date"
          style="width: 130px"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="商业有效期" prop="insurance_date_b">
        <el-date-picker
          v-model="form.insurance_date_b"
          type="date"
          style="width: 130px"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="总质量" prop="weight">
        <el-input style="width: 150px" v-model="form.weight" />
      </el-form-item>
      <el-form-item label="整备质量" prop="full_weight">
        <el-input style="width: 150px" v-model="form.full_weight" />
      </el-form-item>
      <el-form-item label="核定质量" prop="approved_weight">
        <el-input style="width: 150px" v-model="form.approved_weight" />
      </el-form-item>
      <el-form-item label="核定载客" prop="passenger">
        <el-input style="width: 150px" v-model="form.passenger" />
      </el-form-item>
      <el-form-item label="发动机型号" prop="engine_model">
        <el-input style="width: 150px" v-model="form.engine_model" />
      </el-form-item>
      <el-form-item label="燃料种类" prop="fuel_type">
        <el-input style="width: 150px" v-model="form.fuel_type" />
      </el-form-item>
      <el-form-item label="排量功率" prop="engine_power">
        <el-input style="width: 150px" v-model="form.engine_power" />
      </el-form-item>
      <el-form-item label="制造厂家" prop="manufacturer">
        <el-input style="width: 150px" v-model="form.manufacturer" />
      </el-form-item>
      <el-form-item label="轮距" prop="wheel_track">
        <el-input style="width: 150px" v-model="form.wheel_track" />
      </el-form-item>
      <el-form-item label="轮胎数" prop="wheel_number">
        <el-input style="width: 150px" v-model="form.wheel_number" />
      </el-form-item>
      <el-form-item label="轮胎规格" prop="wheel_size">
        <el-input style="width: 150px" v-model="form.wheel_size" />
      </el-form-item>
      <el-form-item label="轴距" prop="wheel_base">
        <el-input style="width: 150px" v-model="form.wheel_base" />
      </el-form-item>
      <el-form-item label="外廓尺寸" prop="outline_size">
        <el-input style="width: 150px" v-model="form.outline_size" />
      </el-form-item>
      <el-form-item label="货箱尺寸" prop="cargo_size">
        <el-input style="width: 150px" v-model="form.cargo_size" />
      </el-form-item>

      <el-form-item label="签合同日期" prop="contract_start">
        <el-date-picker
          v-model="form.contract_start"
          type="date"
          placeholder="签合同日期"
          style="width: 130px"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="合同到期" prop="contract_end">
        <el-date-picker
          v-model="form.contract_end"
          type="date"
          placeholder="合同到期"
          style="width: 130px"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="发票金额" prop="invoice_value">
        <el-input style="width: 150px" v-model="form.invoice_value" />
      </el-form-item>
      <el-form-item label="GPS平台" prop="gps">
        <el-input style="width: 150px" v-model="form.gps" />
      </el-form-item>
      <el-form-item label="收购价格" prop="buy_price">
        <el-input style="width: 150px" v-model="form.buy_price" />
      </el-form-item>
      <el-form-item label="收购介绍费" prop="buy_agent_fee">
        <el-input style="width: 150px" v-model="form.buy_agent_fee" />
      </el-form-item>
      <el-form-item label="收购其他费用" prop="buy_other_fee">
        <el-input style="width: 150px" v-model="form.buy_other_fee" />
      </el-form-item>
      <el-form-item label="收购资料" prop="buy_images">
        <image-upload :limit="99" v-model="form.buy_images" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input style="width: 150px" v-model="form.remark" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="updateModelValue(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, watch, nextTick } from 'vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import { useFormData } from '@/utils/use-form-data';
  import ImageUpload from '@/components/ImageUpload/index.vue';

  import {
    updateVehicle,
    pageCompanyList,
    pageVehicleStatusList,
    pageMyCompanyArea
  } from '@/api/company';
  const emit = defineEmits(['done', 'update:modelValue']);

  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    /** 修改回显的数据 */
    data: Object
  });

  /** 是否是修改 */
  const isUpdate = ref(false);

  /** 提交状态 */
  const loading = ref(false);

  /** 表单实例 */
  const formRef = ref(null);

  /** 表单数据 */
  const [form, resetFields, assignFields] = useFormData({
    id: 0,
    area_id: '',
    area: '',
    company_id: '',
    plate_number: '',
    tel: '',
    realname: '',
    idcard: '',
    address: '',
    brand: '',
    vehicle_type: '',
    vehicle_report_type: '',
    vehicle_model: '',
    drive_type: '',
    color: '',
    vin_number: '',
    engine_number: '',
    business_cert: '',
    reg_date: '',
    check_date: '',
    business_date: '',
    insurance_date_c: '',
    insurance_date_b: '',
    weight: '',
    full_weight: '',
    approved_weight: '',
    passenger: '',
    engine_model: '',
    fuel_type: '',
    engine_power: '',
    manufacturer: '',
    wheel_base: '',
    wheel_track: '',
    wheel_size: '',
    wheel_number: '',
    outline_size: '',
    cargo_size: '',
    status: '',
    contract_start: '',
    contract_end: '',
    invoice_value: '',
    gps: '',
    remark: '',
    buy_images: '',
    buy_price: '',
    buy_agent_fee: '',
    buy_other_fee: ''
  });

  /** 表单验证规则 */
  const rules = reactive({
    title: [
      {
        required: true,
        message: '请输入车辆名称',
        type: 'string',
        trigger: 'blur'
      }
    ]
  });

  /** 保存编辑 */
  const save = () => {
    console.log(form);
    formRef.value?.validate?.((valid) => {
      if (!valid) {
        return;
      }
      loading.value = true;
      updateVehicle(form)
        .then((msg) => {
          loading.value = false;
          EleMessage.success(msg);
          updateModelValue(false);
          emit('done');
        })
        .catch((e) => {
          loading.value = false;
          EleMessage.error(e.message);
        });
    });
  };

  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };

  /** 车队列表 */
  const companyList = ref([]);
  const getCompanyList = () => {
    console.log('初始化车队列表');
    pageCompanyList({ limit: 99999999, area_id: form.area_id })
      .then((res) => {
        companyList.value = res.list;
      })
      .catch((e) => {
        console.log(e);
      });
  };

  /** 状态数据 */
  const statusList = ref([]);
  const getVehicleStatus = () => {
    console.log('初始化车辆状态列表');
    pageVehicleStatusList({ limit: 99999999 })
      .then((res) => {
        statusList.value = res.list;
      })
      .catch((e) => {
        console.log(e);
      });
  };

  /** 区域列表 */
  const areaList = ref([]);
  pageMyCompanyArea({ limit: 99999999 })
    .then((res) => {
      res.list.shift();
      areaList.value = res.list;
    })
    .catch((e) => {
      console.log(e);
    });

  watch(
    () => props.modelValue,
    (modelValue) => {
      getVehicleStatus();
      if (modelValue) {
        if (props.data) {
          assignFields({
            ...props.data
          });
          nextTick(() => {
            getCompanyList();
          });
          isUpdate.value = true;
        } else {
          getCompanyList();
          isUpdate.value = false;
        }
      } else {
        resetFields();
        formRef.value?.clearValidate?.();
      }
    }
  );
</script>
